<template>
  <div class="theme-active-text-color">
    <search-table-template tableTitleTxt='商品列表'>
      <template slot="headerTitleRight">
        <span style="cursor:pointer" @click="searchClose=false" v-if="searchClose">收起 <i class="el-icon-upload2"></i></span>
        <span style="cursor:pointer" @click="searchClose=true" v-if="!searchClose">打开 <i class="el-icon-download"></i></span>
      </template>
      <template slot="headerContent">
          <el-form :inline="true" :model="pageData" class="demo-form-inline " v-if="searchClose" style="padding:15px">
          <el-form-item label="材料名称">
            <el-input v-model="pageData.name" placeholder="材料名称"></el-input>
          </el-form-item>
          <el-form-item label="进货商家">
            <el-input v-model="pageData.merchant" placeholder="进货商家"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getGoodsList">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="tableTitleRight">
        <el-button type="primary" @click="download">下载表格</el-button>
      </template>
        <template slot="tableContent">
          <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="goods_id"
            label="材料id"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="材料名称"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="goods_img"
            label="材料图片"
            align="center"
            >
            <template slot-scope="scope">
              <img :src="scope.row.goods_img"  class="goods_img"/>
              </template>
          </el-table-column>
          <el-table-column
            prop="count"
            label="总量"
            align="center"
            >
          </el-table-column>
           <el-table-column
            prop="used"
            label="使用量"
            align="center"
            >
          </el-table-column>
           <el-table-column
            prop="last"
            label="剩余量"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="merchant"
            label="进货商家"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="isSigned"
            label="合同"
            align="center"
            >
            <template slot-scope="scope">
              <span>{{scope.row.isSigned==1?'已签订':'未签订'}}</span> 
              </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="备注"
            align="center"
            >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button @click="toDetail(scope.row.id,scope.row.goods_id)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            :pageData="pageData"
            @onSearch="paginationSearch(arguments)"
        ></pagination>
        </template>
    </search-table-template>
  </div>
</template>

<script>
import SearchTableTemplate from '../../components/template/SearchTableTemplate.vue';
import Pagination from "@/components/Pagination";
import { goodsApi} from '@/api';
import fileExport from "@/utils/fileExport";

export default {
  name: "",
  components: {
    SearchTableTemplate,
    Pagination
  },
  data() {
    return {
      searchClose:true,
      tableData:[],
      pageData: {
        name:'',
        merchant:'',
        pageNum: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },
  created() {
    this.getGoodsList()
  },
  methods: {

    async getGoodsList(){
      let res = await goodsApi(this.pageData);
      if(res){
        console.log("res",res)
        this.tableData = res.data.dataList;
        this.pageData.pageTotal = res.data.all
      }
    },

    toDetail(id,goods_id){
      this.$router.push({
        path:'goodsDetail',
        query:{
          id:id,
          goodsId:goods_id
        }
      })
    },
    transImg(buffer){
      let bytes = new Uint8Array(buffer.data);
      let data = "";
      let len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        data += String.fromCharCode(bytes[i]);
      }
      let src = "data:image/png;base64," + window.btoa(data);
      return src;
    },
    paginationSearch(data) {
      this.pageData.pageSize = data[1];
      this.pageData.pageNum = data[0];
      this.getGoodsList()
    },

    download(){
      fileExport('材料总表.xlsx',{},'/download')
    }
  }
};
</script>
<style lang="less" scoped>
.goods_img{
  width: 80%;
}

</style>
